<template>
  <!-- 集装箱拓扑 -->
  <div
    v-if="element.type === EQUIP_TYPE.JI_ZHUANG_XIANG"
    class="jiZhuangXiang"
    :class="{
      jiZhuangXiangWithClusters: element.children.some(
        (child) => child.type === EQUIP_TYPE.BATTERY_CLUSTER
      ),
    }"
    :style="{
      position: 'relative',
      width: element.children.some(
        (child) => child.type === EQUIP_TYPE.BATTERY_CLUSTER
      )
        ? 'auto'
        : '50px',
      height: element.children.some(
        (child) => child.type === EQUIP_TYPE.BATTERY_CLUSTER
      )
        ? 'auto'
        : '50px',
    }"
  >
    <!-- 只有有电池簇子元素时才显示电池簇，否则显示原有图标 -->
    <template
      v-if="
        element.children.some(
          (child) => child.type === EQUIP_TYPE.BATTERY_CLUSTER
        )
      "
    >
      <div class="jiZhuangXiangTitle">{{ element.linkName }}</div>
      <div class="batteryClusterWrapper">
        <div class="jiZhuangXiangBorder"></div>
        <!-- 这里渲染 children 中的电池簇 -->
        <div
          v-for="cluster in element.children.filter(
            (child) => child.type === EQUIP_TYPE.BATTERY_CLUSTER
          )"
          :key="cluster.id"
          class="batteryCluster"
          :style="{
            backgroundImage: `url(${BATTERY_CLUSTER_ICON})`,
          }"
          @click="handleEquip(cluster)"
        >
          <div
            v-if="cluster.type === EQUIP_TYPE.BATTERY_CLUSTER"
            class="percent"
            :style="{ height: 30 * getSocVal(cluster) + 'px' }"
          />
          <div class="batteryClusterLabel">{{ cluster.name }}</div>
          <!-- 详细数据 -->
          <div class="detailContent" v-if="cluster.infoData?.length">
            <div
              :class="`detailItem, ${infoItem.name}`"
              v-for="(infoItem, infoIndex) in cluster.infoData"
              :key="infoIndex"
            >
              <div
                v-if="
                  infoItem.name !== 'linkElectronStatus' &&
                  infoItem.name !== 'blockElectronStatus'
                "
              >
                {{ infoItem.name }}:
                <span v-param="infoItem.pdId">{{
                  infoItem.name === "SOC"
                    ? (typeof infoItem.value === 'number' ? infoItem.value.toFixed(2) : infoItem.value) + (infoItem.unit || "")
                    : infoItem.value + (infoItem.unit || "")
                }}</span>
              </div>
              <div v-if="infoItem.name === 'blockElectronStatus'">
                状态：{{ ELECTRON_STATUS_LIST[infoItem.value] }}
              </div>
            </div>
          </div>
          <!-- 资产编码 -->
          <div class="assertCode">
            <div>
              <div>
                资产编码：{{ element?.assertCodeData?.assetCode || "--" }}
              </div>
              <div>
                资产编码释义：{{
                  element?.assertCodeData?.assetCodeExplain ||
                  element?.assertCodeData?.meterAssetCodeExplain ||
                  "--"
                }}
              </div>
            </div>
          </div>
        </div>
        <div
          :class="[
            'linkStatus',
            element.type === EQUIP_TYPE.CHONG_DIAN_ZHUANG
              ? 'cdzLinkStatus'
              : '',
          ]"
        >
          <div v-if="element.lineStatus === 0" class="offline">离线</div>
          <div
            v-if="element?.warnData && Object.keys(element?.warnData)?.length"
            class="warnning"
          >
            告警
            <div :class="['linkDetailContent']">
              <!-- 告警信息，hover显示 -->
              <div class="warnMessage">
                <div v-if="element?.warnData?.warnLevel">
                  告警等级：{{ `${element?.warnData?.warnLevel}级` || "--" }}
                </div>
                <div>
                  告警信息：{{ element?.warnData?.warnMessage || "--" }}
                </div>
                <div>告警触发：{{ element?.warnData?.comment || "--" }}</div>
                <div>
                  规则备注：{{ element?.warnData?.maintenanceAdvice || "--" }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div
        class="jiZhuangXiangIcon"
        :style="{
          backgroundImage: `url(${element.url})`,
          backgroundRepeat: 'no-repeat',
          backgroundSize: 'contain',
          width: '50px',
          height: '50px',
        }"
      ></div>
    </template>
  </div>
</template>
<script setup>
import { EQUIP_TYPE, ELECTRON_STATUS_LIST } from "@/constants/stationConfig";

const BATTERY_CLUSTER_ICON =
  "https://ngp-cloud.oss-cn-shenzhen.aliyuncs.com/dev/2025-01-19/f9968a662f6ab1a71c6a.png"; // 电池簇图片
const emits = defineEmits(["handleEquip"]);
const props = defineProps({
  element: {
    type: Object,
  },
});
const handleEquip = async (element) => {
  emits("handleEquip", element);
};
const getSocVal = (element) => {
  const soc = element?.infoData?.find((item) => item.name === "SOC")?.value;
  if (soc > 0) {
    // 转成百分比
    return soc / 100;
  } else {
    return 0;
  }
};
onMounted(() => {});
</script>

<style lang="less" scoped>
.assertCode {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
  background-color: rgba(50, 50, 50, 0.9);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  font-size: 13px;
  line-height: 1.5;
  z-index: 100;
  width: max-content;
  white-space: nowrap;
  text-align: left;
  display: none;
}

.assertCode div {
  margin-bottom: 6px;
}

.assertCode div:last-child {
  margin-bottom: 0;
}
.detailContent {
  position: absolute;
  width: 90px;
  font-size: 12px;
  left: -9px;
  top: 80px;
  text-align: left;
  .detailItem {
    margin-top: 2px;
    cursor: pointer;
  }
  .P {
    color: #d9001b;
  }
  .Q,
  .V {
    color: #00bfbf;
  }
  .Ia,
  .A {
    color: #ffff00;
  }
  .Ua,
  .SOC {
    color: #f59a23;
  }
  .PF,
  .SOH {
    color: #c280ff;
  }
}
.percent {
  width: 12px;
  height: 20px;
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translate(-50%, 0);
  background: #5fd767;
}
.name {
  position: absolute;
  width: 120px;
}
.linkName {
  left: 20px;
  top: -50px;
  text-align: right;
}
.jiZhuangXiang {
  background-position: center center;
}

.jiZhuangXiangWithClusters {
  position: relative;
}

.jiZhuangXiangBorder {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  bottom: -110px;
  border: 1px solid #ff4d4f;
  border-radius: 8px;
}

.jiZhuangXiangTitle {
  position: absolute;
  top: -25px;
  left: -103px;
  color: #fff;
  border-radius: 4px;
  width: 120px;
  text-align: right;
}

.jiZhuangXiangDeleteBtn {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff4d4f;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  z-index: 10;
}

.jiZhuangXiangDeleteBtn:hover {
  background: #ff7875;
}
.batteryClusterWrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  margin-left: 25px;
  width: auto;
  height: 80px;
}
.batteryCluster {
  position: relative;
  width: 50px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 25px;
  // padding: 0 20px;
  text-align: center;
  cursor: pointer;
  background-color: #202020;
  &:hover {
    .assertCode {
      display: block;
    }
  }
}

.batteryClusterLabel {
  color: #fff;
  margin-top: 60px;
  font-size: 14px;
}
.jiZhuangXiangDetailContent {
  top: 100px;
}
.linkDetailContent {
  position: absolute;
  white-space: nowrap;
  left: 55px;
  font-size: 12px;
  top: 0;
  background: #555555;
  padding: 5px;
  border-radius: 4px;
  line-height: 1.5;
  display: none;
  z-index: 10;
}
.warnning {
  cursor: pointer;
  position: relative;
  &:hover {
    .linkDetailContent {
      display: block;
    }
  }
}
.warnMessage {
  color: #f59a23;
  text-align: left;
}
.linkStatus {
  position: absolute;
  right: -55px;
  top: -57px;
  width: 50px;
  .offline {
    color: #000;
    margin-bottom: 10px;
    &::before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      margin-right: 5px;
      background: #000;
      position: relative;
      top: -1px;
    }
  }
  .warnning {
    color: #f59a23;
    &::before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      margin-right: 5px;
      background: #f59a23;
      position: relative;
      top: -1px;
    }
  }
  .offline,
  .warnning {
    width: 50px;
    margin-right: 5px;
    font-size: 12px;
    background: #fff;
    text-align: center;
    height: 20px;
    line-height: 20px;
    border-radius: 12px;
    display: inline-block;
  }
}
</style>
